<!--
 * @Author: Charlie/彭旺
 * @email: 413157399@qq.com
 * @Date: 2022-06-17 15:40:28
-->
<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-date-picker
        style="borderradios: 0px"
        class="marginleft"
        v-model="query.value1"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        clearable
      >
      </el-date-picker>
      <el-input
        class="marleft"
        v-model="query.value"
        clearable
        placeholder="请输入视频标题"
      />
      <el-button
        type="success"
        icon="el-icon-search"
        size="mini"
        @click="toQuery"
        >搜索</el-button
      >
    </div>
    <!--表格渲染-->
    <el-table
      :data="videoData"
      style="width: 100%"
      height="600px"
      v-if="isReload"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="coverUrl" label="封面图片">
        <template slot-scope="scope">
          <img :src="scope.row.coverUrl" alt="" class="el-avatar" />
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="发布者" />
      <el-table-column
        label="机审状态"
        prop="aiAuditStatus"
        :formatter="stateFormat"
      ></el-table-column>
      <el-table-column prop="auditStatus" label="人工审核状态">
        <template slot-scope="scope">
          {{
            scope.row.auditStatus === 0
              ? "进行中"
              : scope.row.auditStatus === 1
              ? "审核通过"
              : "审核不通过"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="上下架状态" align="center">
        <template slot-scope="scope">
          <el-switch
            style="display: block"
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="上架"
            inactive-text="下架"
            :active-value="1"
            :inactive-value="0"
            @change="handbtn(scope.row, scope.row.status)"
          />
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="发布时间" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div>
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.$index, scope.row, true)"
              >人工复核</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.$index, scope.row, false)"
              >详情</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      @size-change="sizeChange($event, 'VIP')"
      @current-change="pageChange($event, 'VIP')"
      :page-sizes="[1, 10, 20, 30, 40]"
      layout="total,sizes, prev, pager, next"
      :total="videoTotal"
    >
    </el-pagination>

    <!-- 上/下架原因 -->
    <el-dialog
      title="提示"
      :visible.sync="causeDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入原因"
        v-model="textarea"
      >
      </el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelCause">取 消</el-button>
        <el-button type="primary" @click="sureCause">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Tablelist, onOrOff } from "@/api/yxSystemConfig";
import { imgurl } from "@/api/yxUser";
import moment from "moment";

export default {
  inject: ["reload"],
  name: "viedoIndex",
  data() {
    return {
      query: {
        value: "",
        value1: "",
        endTime: "",
        pageNum: 1,
        pageSize: 10,
      }, //搜索
      loading: false, //加载loading
      videoData: [], //短视频列表
      videoTotal: 0,
      // picked: 'one'
      causeDialogVisible: false,
      textarea: "",
      videoId: "",
      viedeoOnOrOff: "",
      isReload: true,
    };
  },
  created() {},
  mounted() {
    this.Tablelists();
  },
  methods: {
    reloadPart() {
      this.isReload = false;
      this.$nextTick(() => {
        this.isReload = true;
      });
    },
    cancelCause() {
      this.causeDialogVisible = false;
      this.reload();
    },
    sureCause() {
      this.causeDialogVisible = false;
      onOrOff({
        id: this.videoId,
        onOrOff: this.viedeoOnOrOff,
        offReason: this.textarea,
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClose() {
      this.causeDialogVisible = false;
      this.reload();
    },
    handbtn(row, index) {
      this.causeDialogVisible = true;
      console.log(row, index);
      this.videoId = row.id;
      this.viedeoOnOrOff = index;
      console.log(this.videoId, this.viedeoOnOrOff);
    },
    stateFormat(row, column) {
      if (row.aiAuditStatus == 0) {
        return "进行中";
      } else if (row.aiAuditStatus === 1) {
        return "通过";
      } else if (row.aiAuditStatus === 2) {
        return "不通过";
      }
    },
    Tablelists() {
      console.log(this.query.value1);
      console.log(this.query.value);
      Tablelist({
        page: this.query.pageNum,
        pageSize: this.query.pageSize,
        title: this.query.value.toString().trim(),
        createTimeEnd: this.query.value1
          ? moment(this.query.value1[1]).format("YYYY-MM-DD HH:mm:ss")
          : "",
        createTimeStart: this.query.value1
          ? moment(this.query.value1[0]).format("YYYY-MM-DD HH:mm:ss")
          : "",
      })
        .then((res) => {
          this.videoData = res.data.content;
          this.videoTotal = +res.data.total;
          this.videoData.forEach((item) => {
            imgurl(item.coverUrl)
              .then((res) => {
                item.coverUrl = res;
              })
              .catch((err) => {
                // console.log(err);
              });
          });
        })
        .catch((err) => {
          // console.log(err);
        });
    },

    handleEdit(_index, row, skipType) {
      this.$router.push({
        path: "vediodetail",
        query: {
          skipType: skipType,
          id: row.id,
        },
      });
    },
    sizeChange(val) {
      this.query.pageSize = val;
      // console.log(this.query.pageSize);
      this.Tablelists();
    },
    pageChange(val) {
      this.query.pageNum = val;
      // console.log(this.query.pageNum);
      this.Tablelists();
    },
    toQuery() {
      this.Tablelists();
    },
  },
};
</script>

<style lang="scss" scoped>
.head-container {
  display: flex;
  align-items: center; // 垂直居中
  .marginleft {
    margin-left: 10px;
  }

  .marleft {
    width: 200px;
    margin-left: auto;
    margin-right: 10px;
  }
}
.el-avatar {
  border-radius: 0px;
}
</style>
